@import '../scss/reset';

html {
    font-size: 0.1333vw;
    overflow: hidden;
    overflow: scroll;
    body {
        width: 750rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(../image/bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        @media (min-width: 768px) {
            background-size: cover;
        }
        header {
            width: 620rem;
            height: 100rem;
            line-height: 100rem;
            font-size: 30rem;
            font-weight: bold;
            color: #0075c1;
            display: flex;
            justify-content: space-between;
            margin: 100rem 0 60rem 0;
        }
        section {
            ul {
                li {
                    width: 590rem;
                    height: 380rem;
                    border-radius: 10rem;
                    font-size: 30rem;
                    font-weight: bold;
                    box-shadow: 0 0 15rem 5rem rgb(97, 96, 96);
                    background-color: rgba($color: white, $alpha: 0.5);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 40rem;
                    position: relative;
                    span {
                        width: 280rem;
                    }
                    :last-child {
                        text-align: end;
                        color: red;
                        position: absolute;
                        right: 30rem;
                        bottom: 30rem;
                    }
                }
            }
        }
        .mask {
            width: 750rem;
            height: 100vh;
            background-color: rgba($color: #000000, $alpha: 0.2);
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            div {
                width: 500rem;
                height: 500rem;
                img {
                    width: 500rem;
                    height: 500rem;
                    background-color: #ffffff;
                }
            }
        }
        .hide_mask {
            transform: translateX(-100%);
            transition: transform 0.5s;
        }
        .show_mask {
            transition: transform 0.5s;
            transform: translateX(0);
        }
        .off {  
            width: 100rem;
            height: 100rem;
            line-height: 100rem;
            font-size: 30rem;
            text-align: center;
            position: fixed;
            top: 0;
            right: 0;
        }
    }
}